<template>
  <div class="maintenance-record-container">
    <!-- 搜索框区域 -->
    <div class="search-wrap">
      <div class="search-input-box">
        <form action="/">
          <van-search
            v-model="searchOptions.searchKey"
            show-action
            shape="round"
            placeholder="搜索工单编号/设备编号"
            @search="searchOptions.handleSearch"
            @clear="searchOptions.handleClear"
          >
            <template #action>
              <div
                class="filter-box"
                @click="searchOptions.handleFilter"
              >
                <i class="iconfont iconshaixuan"></i>
                <span>筛选</span>
              </div>
            </template>
          </van-search>
        </form>
      </div>
    </div>

    <!-- 内容列表区域 -->
    <div
      class="content-list-wrap"
      v-if="mainList.length"
    >
      <div
        v-for="(item,index) in mainList"
        :key="index"
        class="content-item-box"
        @click="jumpDetail(item.id)"
      >
        <!-- 左侧 -->
        <div class="item-left-box">
          <div class="icon-box">
            <i class="iconfont iconweixiugongdan"></i>
          </div>
        </div>
        <!-- 线 -->
        <div class="line-box"></div>
        <!-- 右侧 -->
        <div class="item-right-box">
          <div class="project-name">
            <div class="work-order">工单：{{ item.order_no }}</div>
            <div class="status-box">
              <div
                class="icon-box-status1"
                v-if="item.status === '1'"
              >
                <i class="iconfont iconbianji"></i>
              </div>
              <div
                class="icon-box-status2"
                v-if="item.status === '2'"
              >
                <i class="iconfont iconshangyi"></i>
              </div>
              <div
                class="icon-box-status3"
                v-if="item.status === '3'"
              >
                <i class="iconfont iconxiayi"></i>
              </div>
              <div
                class="icon-box-status4"
                v-if="item.status === '4'"
              >
                <i class="iconfont icontianjiawancheng"></i>
              </div>
              <div
                class="icon-box-status5"
                v-if="item.status === '5'"
              >
                <i class="iconfont iconguanbi-01"></i>
              </div>
              <span>{{ item.status | handleStatus(item.status) }}</span>
            </div>
          </div>
          <div class="middle-box">设备编号：{{ item.number }}</div>
          <div class="company-name">
            <!-- 工单来源，PC上暂时没有，移动端暂时也不要 -->
            <div class=""></div>
            <div class="">{{ item.updated_at }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 无数据 -->
    <div
      class="no-data-box"
      v-if="noDataState"
    >暂无数据</div>

    <MainFilter
      v-show="showMainFilter"
      :projectId="projectId"
      @submit="submitFilter"
    ></MainFilter>
  </div>
</template>

<script>
import { Search } from 'vant';
import MainFilter from '../components/MainFilter.vue';
import { getProjectDetail, getProductLineList, getMaintenanceList } from '@/api/projectManage';

export default {
  name: 'MaintenanceRecord',
  components: {
    [Search.name]: Search,
    MainFilter
  },
  props: {
    projectId: Number // 项目id
  },
  data() {
    return {
      // 搜索相关配置
      searchOptions: {
        searchKey: '',
        handleSearch: this.getMaintenanceListEvent,
        handleClear: this.getMaintenanceListEvent,
        handleFilter: this.handleFilter
      },

      showMainFilter: false, // 控制筛选封装组件显示与隐藏
      projectDetail: {}, // 项目详情
      proLineList: [], // 产线列表
      proLineIds: '', // 产线id - 字符串形式
      mainList: [], // 维修记录
      orderStatus: '', // 工单状态
      startTime: '',
      endTiem: '',
      noDataState: false
    };
  },
  created() {
    this.getProjectDetailEvent();
  },
  methods: {
    // 获取项目详情
    getProjectDetailEvent() {
      const params = {
        project_id: this.projectId // 项目id
      };
      getProjectDetail(params)
        .then(res => {
          const resData = res.data;
          resData.send_time2 = this.formatDate(resData.send_time);
          resData.debug_time2 = this.formatDate(resData.debug_time);
          resData.acceptance_time2 = this.formatDate(resData.acceptance_time);
          resData.warranty_time2 = this.formatDate(resData.warranty_time);

          // 发货时间
          resData.send_time = resData.send_time * 1000;
          let sendTime = resData.send_time;
          // 调试时间
          resData.debug_time = resData.debug_time * 1000;
          let debugTime = resData.debug_time;
          // 验收时间
          resData.acceptance_time = resData.acceptance_time * 1000;
          let acceptanceTime = resData.acceptance_time;
          // 质保时间
          resData.warranty_time = resData.warranty_time * 1000;
          let warrantyTime = resData.warranty_time;
          // 判断 质保时间、验收时间、调试时间、发货时间
          // 当前时间
          let currentDateTime = new Date().getTime();
          // 已过保
          if (warrantyTime < currentDateTime) {
            resData.project_status = '已过保';
          } else {
            // 未过保
            // 有验收时间
            if (resData.acceptance_time) {
              // 已验收
              // 超过验收时间
              if (acceptanceTime < currentDateTime) {
                resData.project_status = '已验收';
              } else {
                // 未超过验收时间
                // 有调试时间
                if (resData.debug_time) {
                  // 超过调试时间
                  if (debugTime < currentDateTime) {
                    resData.project_status = '已交付';
                  } else {
                    // 未超过调试时间
                    // 有发货时间
                    if (resData.send_time) {
                      // 超过发货时间
                      if (sendTime < currentDateTime) {
                        resData.project_status = '试运行';
                      } else {
                        // 未超过发货时间
                        resData.project_status = '未知';
                      }
                    } else {
                      // 无发货时间
                      resData.project_status = '未知';
                    }
                  }
                } else {
                  // 无调试时间
                  // 有发货时间
                  if (resData.send_time) {
                    // 超过发货时间
                    if (sendTime < currentDateTime) {
                      resData.project_status = '试运行';
                    } else {
                      // 未超过发货时间
                      resData.project_status = '未知';
                    }
                  } else {
                    // 无发货时间
                    resData.project_status = '未知';
                  }
                }
              }
            } else {
              // 无验收时间
              // 有调试时间
              if (resData.debug_time) {
                // 超过调试时间
                if (debugTime < currentDateTime) {
                  resData.project_status = '已交付';
                } else {
                  // 未超过调试时间
                  // 有发货时间
                  if (resData.send_time) {
                    // 超过发货时间
                    if (sendTime < currentDateTime) {
                      resData.project_status = '试运行';
                    } else {
                      // 未超过发货时间
                      resData.project_status = '未知';
                    }
                  } else {
                    // 无发货时间
                    resData.project_status = '未知';
                  }
                }
              } else {
                // 无调试时间
                // 有发货时间
                if (resData.send_time) {
                  // 超过发货时间
                  if (sendTime < currentDateTime) {
                    resData.project_status = '试运行';
                  } else {
                    // 未超过发货时间
                    resData.project_status = '未知';
                  }
                } else {
                  // 无发货时间
                  resData.project_status = '未知';
                }
              }
            }
          }

          this.projectDetail = resData;
        })
        .then(res => {
          // 获取产线列表
          this.getProductLineListEvent();
        });
    },
    // 获取产线列表
    getProductLineListEvent() {
      const params = {
        project_id: this.projectId // 项目id
      };
      getProductLineList(params)
        .then(res => {
          this.proLineList = res.data.list;
          let proLineIdsArr = [];
          if (res.data.list && res.data.list.length) {
            res.data.list.map(item => {
              item.checked = false;
              proLineIdsArr.push(item.ID);
            });
          }
          if (proLineIdsArr.length) {
            this.proLineIds = proLineIdsArr.join(',');
          }
        })
        .then(() => {
          // 获取项目维修保养列表
          this.getMaintenanceListEvent();
        });
    },
    // 获取项目维修保养列表
    getMaintenanceListEvent() {
      const params = {
        start_time: this.startTime,
        end_time: this.endTiem,
        status: this.orderStatus, // 工单状态
        project_line_id: this.proLineIds, // 产线id
        search: this.searchOptions.searchKey // 输入工单编号/设备编号查找
      };
      getMaintenanceList(params).then(res => {
        if (res.data.list && res.data.list.length) {
          res.data.list.map(item => {
            item.updated_at = item.updated_at.substr(0, 19).replace('T', ' ');
          });
          this.mainList = res.data.list;
          this.noDataState = false;
        } else {
          this.mainList = [];
          this.noDataState = true;
        }
      });
    },
    // 格式化日期
    formatDate(now) {
      let dt = new Date(now * 1000);
      let year = dt.getFullYear();
      let month = dt.getMonth() + 1;
      month = month < 10 ? '0' + month : month;
      let date = dt.getDate();
      date = date < 10 ? '0' + date : date;
      return `${year}-${month}-${date}`;
    },

    // 筛选
    handleFilter() {
      this.showMainFilter = true;
    },

    // 维修记录详情
    jumpDetail(id) {
      if (this.$checkBtnPermission('maintenanceCenter:workOrderManage:list:detail')) {
        this.$router.push({
          name: 'workOrderManageDetail',
          query: { id, from: 'other' }
        });
      } else {
        this.$toast(this.$store.state.noDetailPermissionText);
      }
    },

    // 筛选组件的确定按钮
    submitFilter(params) {
      if (params.project_line_id) this.proLineIds = params.project_line_id;
      this.orderStatus = params.status;
      this.startTime = params.startTime;
      this.endTiem = params.endTiem;
      this.getMaintenanceListEvent();
      this.showMainFilter = false;
    }
  },
  filters: {
    // 处理状态
    handleStatus(num) {
      let statusText = '';
      switch (num) {
        case '1':
          statusText = '已创建';
          break;
        case '2':
          statusText = '已派单';
          break;
        case '3':
          statusText = '已接单';
          break;
        case '4':
          statusText = '已完成';
          break;
        case '5':
          statusText = '已取消';
          break;
      }
      return statusText;
    }
  }
};
</script>

<style lang="scss" scoped>
.maintenance-record-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  // 搜索框区域
  .search-wrap {
    background-color: #ffffff;
    .search-input-box {
      height: 1.6rem;
      padding-right: 0.16rem;
      .van-search {
        height: 100%;
      }
      .filter-box {
        color: #666666;
      }
    }
  }

  // 内容列表区域
  .content-list-wrap {
    flex: 1;
    height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 0.213333rem;
    .content-item-box {
      display: flex;
      align-items: center;
      height: 2.613333rem;
      background-color: #ffffff;
      margin-bottom: 0.213333rem;
      padding: 0.293333rem 0.4rem;
      .item-left-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        .icon-box {
          display: flex;
          justify-content: center;
          width: 1.12rem;
          height: 1.12rem;
          line-height: 1.12rem;
          border-radius: 50%;
          background-color: #ebf1ff;
          i {
            color: #3378ff;
            font-size: 0.533333rem;
          }
        }
      }
      .line-box {
        width: 1px;
        height: 1.973333rem;
        background-color: #f2f6fc;
        margin: 0 0.293333rem;
      }
      .item-right-box {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        padding: 0.08rem 0;
        .project-name {
          display: flex;
          justify-content: space-between;
          color: #333333;
          font-size: 0.4rem;
          .work-order {
            color: #333333;
            font-size: 0.4rem;
          }
          .status-box {
            display: flex;
            align-items: center;
            color: #666666;
            font-size: 0.32rem;
            // 已创建样式
            .icon-box-status1 {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 0.48rem;
              height: 0.48rem;
              background-color: #54b7ff;
              border-radius: 50%;
              margin-right: 0.08rem;
              i {
                color: #ffffff;
                font-size: 0.266667rem;
              }
            }
            // 已派单样式
            .icon-box-status2 {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 0.48rem;
              height: 0.48rem;
              background-color: #d695f4;
              border-radius: 50%;
              margin-right: 0.08rem;
              i {
                color: #ffffff;
                font-size: 0.266667rem;
              }
            }
            // 已接单样式
            .icon-box-status3 {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 0.48rem;
              height: 0.48rem;
              background-color: #c5df5d;
              border-radius: 50%;
              margin-right: 0.08rem;
              i {
                color: #ffffff;
                font-size: 0.266667rem;
              }
            }
            // 已完成样式
            .icon-box-status4 {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 0.48rem;
              height: 0.48rem;
              background-color: #81e4a9;
              border-radius: 50%;
              margin-right: 0.08rem;
              i {
                color: #ffffff;
                font-size: 0.266667rem;
              }
            }
            // 已取消样式
            .icon-box-status5 {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 0.48rem;
              height: 0.48rem;
              background-color: #f4a476;
              border-radius: 50%;
              margin-right: 0.08rem;
              i {
                color: #ffffff;
                font-size: 0.266667rem;
              }
            }
          }
        }
        .middle-box {
          color: #666666;
          font-size: 0.346667rem;
        }
        .company-name {
          display: flex;
          justify-content: space-between;
          color: #999999;
          font-size: 0.32rem;
        }
      }
    }
  }
}
</style>
